<template>
  <div class="query-page">
    <div class="q-header">
      <span>2、请选择省/市/自治区（可多选）</span>
      <a href="javascript:;" class="select-all" @click="selAll()">{{selectAll.text}}</a>
    </div>
    <div class="area-wrap clearfix">
      <div class="area-group clearfix" v-for="(areaGroup, index) in areaData" :key="index">
        <a href="javascript:;" class="area-item" :class="{'active': area[index][idx]}" v-for="(ati, idx) in areaGroup" :key="idx" @click="checkArea(index, idx)">
          {{ati}}
        </a>
      </div>
    </div>
    
    <div class="btn-next-group">
      <a href="javascript:;" class="btn-next" @click="queryNext()">下一步</a>
    </div>
  </div>
</template>

<script>
import Utils from '@/common/utils.js'
export default {
  data () {
    return {
      areaData: [
        ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江'],
        ['上海', '江苏', '浙江', '安徽', '福建', '江西', '山东'],
        ['河南', '湖北', '湖南', '广东', '广西', '海南'],
        ['重庆', '四川', '贵州', '云南', '西藏'],
        ['陕西', '甘肃', '青海', '宁夏', '新疆']
      ],
      area: [
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0]
      ],
      selectAll: {
        text: '全选',
        status: 1
      },
      examType: 0
    }
  },
  created () {
    this.examType = Utils.local('userData').examType
    let _area = Utils.session('area')
    if (_area) {
      this.area = (_area)
    }
  },
  methods: {
    // 全选 or 撤销
    selAll () {
      if (this.selectAll.status === 1) {
        this.selectAll = {
          text: '撤销',
          status: 0
        }
        this.area = this.setAreaArr(1)
      } else {
        this.selectAll = {
          text: '全选',
          status: 1
        }
        this.area = this.setAreaArr(0)
      }
    },
    setAreaArr (num) {
      let _area = []
      this.area.map((areaGroup, idx) => {
        let _areaItem = []
        areaGroup.map((item, idx2) => {
          _areaItem.push(num)
        })
        _area.push(_areaItem)
      })
      return _area
    },
    // 选择地区
    checkArea (pidx, midx) {
      let _aearItem = this.area[pidx]
      let _val = this.area[pidx][midx] ? 0 : 1
      this.$set(_aearItem, midx, _val)
      this.$set(this.area, pidx, _aearItem)
    },
    // 下一步
    queryNext () {
      // 循环已选项
      let _areaStringArr = []
      this.area.map((areaGroup, idx) => {
        areaGroup.map((areaItem, idx2) => {
          if (areaItem === 1) {
            _areaStringArr.push(this.areaData[idx][idx2])
          }
        })
      })
      if (_areaStringArr.length === 0) {
        this.$vux.toast.show({
          text: '至少选择一个地区',
          type: 'text',
          width: '80%'
        })
        return
      }
      Utils.session('area', this.area)
      Utils.session('areaString', _areaStringArr)
      if (this.examType === 1) {
        this.$router.push({name: 'queryStep3'})
      } else {
        this.$router.push({name: 'queryStep4'})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.area-wrap{
  padding: 0 .4rem;
  font-size: 14px;
  color: #fff;
  .area-group{
    width: 8.2rem;
    margin: 0 auto;
    margin-bottom: .16rem /* 6/37.5 */;
    .area-item{
      margin-right: .4rem;
      margin-bottom: .213333rem /* 8/37.5 */;
      background-color: #bebebe;
      border-radius: .08rem /* 3/37.5 */;
      width: 1.75rem;
      height: .8rem;
      line-height: .8rem;
      display: inline-block;
      text-align: center;
      &.active{
        background-color: #FFA440;
        box-shadow: 0px 3px 10px 0px rgba(255, 134, 0, 0.25);
      }
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
.btn-next-group{
  margin-top: .266667rem;
}
</style>
